@charset 'utf-8';
@backColor:#F86049;
@fontColor:#999;
#page{
 .tb_shop{
   height: 150px;
   box-sizing: border-box;
   border-bottom: 30px @backColor solid;
   .container{
     width: 990px;
     height: 100%;
     .top{
       width: 100%;
       height: 120px;
       background: url(https://gdp.alicdn.com/imgextra/i4/2206736426581/O1CN017UkwvS1yU9BPg3fzL_!!2206736426581.jpg) repeat 0 0 !important;
     }
     
    .allList{
      float: left;
      position: relative;
      >a{
        display: inline-block;
        text-decoration: none;
        width: 188px;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;
        height: 35px;
        line-height: 30px;
        color: white;
        position: relative;
        i{
          float: right;
          line-height: 30px;
          width: 8px;
          height: 8px;
          border: 1px solid white;
          margin-top: 10px;
          transform: rotate(45deg);
          border: 1px solid black;
          border-color:@backColor rgb(212, 209, 209) rgb(212, 209, 209) @backColor;
        }
        
        &:hover{
          background-color: white;
          color: @backColor;
          i{
            margin-top: 15px;
            border-color:@fontColor;
            transform: rotate(-135deg);
            border-color:white #999 #999 white;
          }
        }
      }
      ol{
        display: none;
        width: 188px;
        position: absolute;
        top: 30px;
        left: 0 ;
        z-index: 999;
        background-color: white;
        li{
          position: relative;
          padding: 0;
          a{
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            color: #999;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            padding-left: 10px;
            border-bottom: 1px solid #cccccc;
            &:hover{
              background-color: rgb(240, 229, 229);
              color: #c75847;
            }
          }

          >ol{
            display: none;
            width: 100%;
            height: 200px;
            overflow: auto;
            position: absolute;
            top: 0;
            left: 188px;
            a{
              border: 0;
            }
          }
          &:hover ol{
            display: block;
          }
        }
        
      }
      &:hover> ol{
        display: block;
      }
    }
   
    
    ul{
      float: left;
      a{
        display: inline-block;
        text-decoration: none;
        width: 50px;
        height: 30px;
        box-sizing: border-box;
        padding: 0 10px;
        height: 35px;
        line-height: 30px;
        color: white;
        &:hover{
          background-color: white;
          color: @backColor;
        }
      }
    }
     

   }
 }
 .detail{
   #show{
    width: 1190px;
    height: 605px;
    margin:20px auto;

    // 左边的商品信息
    .showLeft{
      width: 990px;
      height: 100%;
      float: left;
      box-shadow: 1px 0px 1px #F2F2F2;
      // 照片部分
      >.photo{
        float: left;
        width: 460px;
        height: 100%;
        .bigph{
          margin:20px 20px 0 ;
          width: 420px;
          height: 420px;
          background-color: #fff;
          box-shadow: 1px 1px 1px #F2F2F2,0px -1px 1px #F2F2F2;
          position: relative;
          span{
            position: absolute;
            top: 0;
            left: 0;
            width: 210px;
            height: 210px;
            background-color:transparent;
            background-image: url('https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png');
            display: none;
            z-index: 999999;
          }
         
          img{
            width: 420px;height: 420px;
          }
        }
        .big{
          position: absolute;
          width: 420px;
          height: 420px;
          top: 355px;
          left: 620px;
          background-color: red;
          box-shadow: 1px 1px 1px #999, -1px -1px 1px #999;
          display: none;
        }
        .smallph{
          width: 100%;
          height: 82px;
          display: flex;
          align-items: flex-end;
          padding-left: 30px;
          margin-bottom: 0;
          li{
            width: 62px;
            height: 62px;
            margin-left: 16px;
            padding: 0;
            img{
              margin: 1px;
              width: 60px;
              height: 60px;
            }
          }
        }
        p{
          margin-bottom: 0;
          color: @fontColor;
          font-size: 14px;
          width: 100%;
          padding: 38px 0 0 40px;
          box-sizing: border-box;
          background-color: #fff;
        }
      }
      // 商品属性部分
      .introduce{
        width: 530px;
        height: 430px;
        float: left;
        .tb_detail_hd{
          width: 100%;
          box-sizing: border-box;
          padding: 20px 10px 12px;
          background-color: white;
          h1{
            font-size: 15px;
            font-weight: 900;
            margin: 0;
            padding-bottom: 3.2px;
          }
          p{
            color: #FF0036;
          }
        }
        .tm_fcs_panel{
          width: 510px;
          height: 41px;
          box-sizing: border-box;
          padding: 5px 0;
          background-color: #E9E9E9;
          line-height: 31px;
          span{
              font-size: 12px;
              color: @fontColor;
              display: inline-block;
              width: 70px;
              margin-left: 8px;
          }
          em,i{
            font-style: normal;
            color: red;
            font-size: 20px;
          }
          i{
            font-size: 25px;
            font-weight: 900;
          }
          span,em,i{
            vertical-align: middle;
          }
        }
        .tb_meta{
          width: 510px;
          height: 38px;
          background-color: #fff;
          line-height: 38px;
          position: relative;
          >span{
            font-size: 12px;
            color: @fontColor;
            display: inline-block;
            width: 50px;
            margin: 0 10px;
          }
          strong{
            cursor: pointer;
            em{
              font-style: normal;
              position: relative;
              display: inline-block;
              width: 37px;
              font-size: 12px;
              b{
                font-weight: normal;
              }
              i{
                position: absolute;
                line-height: 30px;
                width: 8px;
                height: 8px;
                border: 1px solid white;
                margin-top: 10px;
                transform: rotate(45deg);
                border: 1px solid black;
                border-color: rgb(255, 254, 254) black black rgb(255, 255, 255) ;
                top: 3px;
                left: 27px;
              }
              &:nth-of-type(2) i{
                left: 39px;
              }
            }
          }
          .address{
            display: none;
            position: absolute;
            width: 100%;
            height: 313px;
            border: 1px solid black;
            background-color: white;
            .closebox{
              position: absolute;
              font-family: tm-detail-font;
              width: 14px;
              height: 20px;
              right: 5px;
              cursor: pointer;
              overflow: hidden;
              font-size: 20px;
              top: 0;
              color: #333;
              font-weight: normal;
              line-height:20px;
            }
            .addressNow{
              padding: 10px;
              line-height: 24px;
              p{
                font-size: 13px;
                height: 24px;
                margin: 0;
              }
              span{
                font-size: 12px;
                border: 2px solid #ddd;
                border-radius: 2px;
                padding: 2px 6px ;
                cursor: pointer;
                &:hover{
                  border-color: red;
                }
              }
            }
            .select{
              width: 100%;
              
              background-color: #F2F2F2;
              padding: 5px;
              ul{
                display: flex;
                margin: 0;
                li{
                  cursor: pointer;
                  padding: 3px 8px;
                  font-size: 12px;
                  line-height: 24px;
                  border-right:1px solid rgb(216, 213, 213) ;
                  border-top:1px solid rgb(216, 213, 213) ;
                  &:nth-of-type(1){
                    border-left:1px solid rgb(216, 213, 213) ;
                  }
                }
                .xuan{
                  background-color: white;
                }
              }
              .city{
                width: 100%;
                background-color: white;
                height: 200px;
                // margin-top: -10px;
                border: 1px solid rgb(216, 213, 213);
                padding: 5px 10px;
                position: relative;
                >div{
                  display: none;
                  position: absolute;
                }
                .display{
                  display: block;
                }
                ol{
                  display: flex;
                  flex-wrap: wrap;
                  li{
                    cursor: pointer;
                    margin: 4px 9px;
                    padding: 2px 6px;
                    font-size: 12px;
                    line-height: 24px;
                    &:hover{
                      background-color: red;
                      color: white;
                      border-radius: 2px;
                    }
                    .checked{
                      background-color: red;
                      color: white;
                      border-radius: 2px;
                    }
                  }
                }
              }
            }
          }
        }
        .tm_ind_panel{
            width: 510px;
            height: 38px;
            box-sizing: border-box;
            padding: 10px 0;
            border: 1px solid @fontColor;
            border-left: 0;
            border-right: 0;
            text-align: center;
            background-color: white;
            span{
              font-size: 12px;
              color: @fontColor;
              display: inline-block;
              width: 50px;
              // margin:  10px;
             
            }
            b{
              color: red;
              font-size: 14px;
            }
        }
        .add{
          padding: 10px 0 6px;
          div{
            display: flex;
            align-items: center;
            span{
              font-size: 12px;
              color: @fontColor;
              display: inline-block;
              width: 50px;
            }
            ul{
              margin: 0;
              display: flex;
              li{
                box-sizing: border-box;
                line-height: 28px;
                padding: 1px 10px;
                margin: 0 4px 4px 0;
                border: 1px solid #b8b7bd;
                font-size: 12px;
                color: @fontColor;
              }
              .checked{
                border: 3px solid red;
                padding: 0 6px;
              }
            }
          }
        }
        .tb_key{
          width: 500px;
          height: 112px;
          margin: 0 20px 24px 10px;
          padding: 10px 0;
          background-color: #fff;
          .top{
            width: 500px;
            height: 35px;
            display: flex;
            align-items: center;
            span{
              font-size: 12px;
              color: @fontColor;
              display: inline-block;
              width: 50px;
              // margin:  10px;
              &:nth-last-of-type(1){
                width: 100px;
                em{
                  font-style: normal;
                }
              }
            }
            .number{
              display: flex;
              align-items: center;
              height: 100%;
              input{
                width: 43px;
                height: 31px;
                box-sizing: border-box;
                outline: 0;
                border: 0;
                border: 1px solid black;
                padding: 2px;
              }
              em{
                display: flex;
                margin-left: 3px;
                flex-direction: column;
                justify-content: space-between;
                width: 18px;
                height: 31px;
                em{
                  border: 1px solid black;
                  width: 100%;
                  height: 14px;
                  .icon-jiantoushang,.icon-jiantouxia{
                    height: 10px;
                    font-size: 10px;
                  }
                }
              }
              span{
                margin-left: 10px;
              }
            }
          }
          .bottom{
            margin-left: 50px;
            margin-top: 20px;
            a{
              display: inline-block;
              width: 180px;
              height: 40px;
              box-sizing: border-box;
              border: 1px solid #FF0036;
              background-color: #FFEDED;
              color: #FF0036;
              text-decoration: none;
              text-align: center;
              line-height: 40px;
              margin-right: 10px;
            }
            a:nth-of-type(2){
              background-color: #FF0036;
              color: white;
            }
          }
        }
        .tm_ser{
          width: 490px;
          margin:40px 20px;
          background-color: white;
          display: flex;
          justify-content: space-between;
          .shouhou{
            width: 423px;
            height: 46px;
            display: flex;
            span{
              font-size: 12px;
              color: @fontColor;
              display: inline-block;
              width: 50px;
              // margin:  10px;
            }
            .lianjie{
              display: flex;
              flex-wrap:wrap ;
              margin-left: 16px;
              width: 320px;
              a{
                text-decoration: none;
                color: #666;
                font-size: 12px;
                // display: inline-block;
                margin: 0 20px 5px 0;
              }
            }
          }
          .pay{
            
            span{
              font-size: 12px;
              color: #666;
              display: inline-block;
              width: 50px;
              // margin:  10px;
            }
          }
        }
      }
    }
    // 右边的列表
    .productList{
      float: left;
      width: 200px;
      height: 100%;
      >p{
        text-align: center;
        i,span{
          vertical-align: middle;
          display: inline-block;
        }
        i{
          width: 35px;
          height: 1px;
          background-color: #C9C9C9;
        }
        span{
          font-size: 12px;
          color: #666;
          width: 50px;
          margin:  10px;
        }
      }
      .content{
        width: 175px;
        height: 520px;
        margin: auto;
       .box{
         height: 480px;
         width: 100%;
         overflow: hidden;
         position: relative;
        ul{
          width: 100%;
          margin: auto;
          position: absolute;
          li{
            width: 100%;
            height: 160px;
            div{
              width: 140px;
              height: 140px;
              margin: auto;
              img{
                width: 100%;
                height: 100%;
              }
              p{
                font-size: 12px;
                height: 20px;
                line-height: 20px;
                color: #666;
                text-align: center;
              }
            }
          }
        }
       }
        .updown{
          width: 100%;
          margin: auto;
          box-sizing: border-box;
          padding: 0 42px;
          display: flex;
          justify-content: space-between;
          span{
            width: 27px;
            height: 27px;
            .icon-jiantouxia,
            .icon-jiantoushang{
              font-style: 20px;
            }
          }
        }
      }
    }
   }
 }
 .tm_layout{
   width: 1190px;
   height: 84px;
   margin: auto;
   a{
     display: inline-block;
     width: 990px;
     height: 100%;

   }
 }
 .bd{
   width: 1190px;
   margin: auto;
   height: 1000px;
   .col_sub{
     float: left;
     width: 190px;
     height: 500px;
     margin-right: 10px;
     background-color: #fff;
     .topNav{
      border: 1px solid #E5E5E5;
      .top{
        width: 188px;
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        font-weight: 900;
        padding:0 15px;
        background-color: #FAFAFA;
      }
      .bottom{
        .tu{
         display: flex;
         width: 130px;
         margin: auto;
         .shopdsr-item{
           width: 36px;
           height: 36px;
           margin: 15px 7px 0 0;
           .shopdsr-score-con{
             color: red;
           }
         }
        }
        .anniu{
          margin: 15px 0;
         a{
           display: inline-block;
           width: 72px;
           height: 26px;
           font-size: 12px;
           box-sizing: border-box;
           border: 1px solid black;
           background-color: black;
           color: white;
           text-decoration: none;
           text-align: center;
           line-height: 26px;
           margin-left: 20px;
         }
         a:nth-of-type(2){
           background-color: white;
           color: black;margin-left: 5px;
         }
        }
      }
     }
     .search{
      border: 1px solid #E5E5E5;
       margin-top: 5px;
       .top{
         background-color: black;
         color: white;
         font-weight: 900;
         height: 25px;
         padding: 0 10px;
         line-height: 25px;
       }
       .bottom{
         >div{
           width: 170px;
           height: 22px;
           font-size: 12px;
           margin-top: 10px;
           display: flex;
           justify-content: flex-end;
         }
         .price{
           input,span,i{
             vertical-align: middle;
           }
           input{
             width: 35px;
             height: 18px;
             padding: 0 2px 0 12px;
             box-sizing: content-box;
             &:nth-of-type(2){
               margin: 0;
             }
           }
           i{
            margin: 10px 2px 0;
             width: 4px;
             height: 1px;
             background-color: #000;
           }

         }
         input{
           margin-left: 5px;
           border: 0;
           outline: 0;
           width: 110px;
           height: 20px;
           padding: 0 2px ;
           border: 1px solid black;
         }
         .comfirm{
           width: 57px;
           height: 24px;
           background-color: #000;
           margin:5px auto 15px;
         }
       }
     }
     .List{
      border: 1px solid #E5E5E5;
      margin-top: 10px;
      .top{
        background-color: black;
        color: white;
        font-weight: 900;
        height: 25px;
        padding: 0 10px;
        line-height: 25px;
      }
      >ul{
        >li{
          padding: 0;
          a{
            height: 30px;
            background-color: #F9F9F9;
            font-size: 12px;
            font-weight: 900;
            line-height: 30px;
            color: black;
            display: inline-block;
            padding-left: 20px;
            width: 100%;
            border-bottom: 1px solid #DFDFDF;
            &:hover{
              color: red;
            }
          }
          
        }
      }
     }
   }
   .col_main{
    width: 790px;
    height: 500px;
    margin: auto;
    background-color: #fff;
    .ulBox{
      height: 48px;
      top: 0;
      background-color:white;
      z-index: '9999';
      left: 0;
      ul{
        width: 790px ;
        height: 48px;
        box-shadow: 1px 1px 1px #DFDFDF,-1px -1px 1px #DFDFDF;
        margin: 0 auto;
        li{
          float: left;
          padding: 0;
          &:nth-of-type(4){
            float: right;
            position: relative;
            img{
              position: absolute;
              display: none;
              top: 48px;
              left: 0px;
              width: 160px;
              z-index: 9999;
            }
            a{
              width: 160px;
              padding-right: 50px;
              color: #989898;
              position: relative;
              text-align: right;
              &::after{
                position: absolute;
                content: '';
                display: block;
                border-top: 5px solid #D9D9D9;
                border-right: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 5px solid transparent;
                top: 20px;
                left: 140px;
              }
              
            }
            &:hover a{
              background-color: #F1F3F4;
            }
            &:hover img{
              display: block;
              z-index: 999;
            }
            &:hover a::after{
              border-top: 5px solid transparent;
              border-right: 5px solid transparent;
              border-bottom: 5px solid #D9D9D9;
              border-left: 5px solid transparent;
              top: 15px;
            }
          }
          a{
            display: inline-block;
            padding: 0 20px;
            line-height: 48px;
            font-size: 12px;
            text-decoration: none;
            color: black;
            position: relative;
          }
          span{
            color: #DFDFDF;
          }
        }
        .checked{
          border-top: 3px solid #FF0036;
          box-sizing: border-box;
          box-shadow: 1px 0 1px rgb(180, 173, 173) inset,-1px 0 1px rgb(180, 173, 173) inset;
          position: relative;
          
          >a{
            color: #FF0036;
            font-weight: 700;
            line-height: 45px;
            &::after{
              content: '';
              display: block;
              position: absolute;
              border-top: 5px solid #FF0036;
              border-right: 5px solid transparent;
              border-bottom: 5px solid transparent;
              border-left: 5px solid transparent;
              top: -1px;
              left: 50%;
            }
          }
        }
      }
      .shopCar{
        display: none;
        
        position: absolute;
        top: 0;
        left: 1155px;
        background-color: #FF0036;
        text-align: center;
        width: 200px;
        height: 47px;
        a{
        display: inline-block;
        line-height: 48px;
        color: white;
        text-decoration: none;
        }
      }
    }
    .content{
      position: relative;
      .tupian{
        .topBox {
          position: relative;
          height: 60px;
          margin-bottom: 15px;
          background-color: #7a45e5;
          background: -moz-linear-gradient(left, #7a45e5 20%, #b23cef 80%);
          background: -webkit-gradient(linear, left top, right top, color-stop(20%, #7a45e5), color-stop(80%, #b23cef));
          background: -webkit-linear-gradient(left, #7a45e5 20%, #b23cef 80%);
          background: -o-linear-gradient(left, #7a45e5 20%, #b23cef 80%);
          background: -ms-linear-gradient(left, #7a45e5 20%, #b23cef 80%);
          background: linear-gradient(to right, #7a45e5 20%, #b23cef 80%);
          span {
            position: relative;
            z-index: 9;
            width: 240px;
            height: 60px;
            display: block;
            margin: 0 auto;
            img {
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          .centerPh {
            position: absolute;
            top: 22px;
            left: 0;
            width: 100%;
            height: 15px;
            background: url(//gtms01.alicdn.com/tps/i1/TB1IkUaJVXXXXaxXFXX71_f8FXX-789-15.png) center repeat-x;
          }
        }
      .botBox {
        font-size: 12px;
          overflow: hidden;
          clear: both;
          padding: 10px 0 10px 40px;
          .title {
            color: #565656;
            font-size: 16px;
            font-weight: 600;
          } 
          .desc {
            color: #999;
            padding-left: 70px;
            .more {
              color: #666;
            } 
          }
          .icon {
            position: relative;
            float: left;
            padding-right: 15px;
            margin-right: 15px;
            height: 40px;
            img {
              width: 40px;
              height: 40px;
            }
            .br {
              border-right: 1px solid #d7d7d7;
              height: 30px;
              position: absolute;
              top: 10px;
              right: 0;
            }
          }
      }
      
      }
      .leftCon{
        display: none;
        position: absolute;
        width: 100%;
        height: 400px;
        .attrbutes{
          border: 1px solid #E5E5E5;
          font-size: 12px;
          height: 139px;
          .name{
            height: 59px;
            padding: 8px 20px 10px;
            line-height: 40px;
          }
          p{
            height: 32px;
            padding: 5px 20px;
            margin: 0;
          }
          ul{
            padding: 0 20px;
            margin: 0;
            overflow: hidden;
            li{
              padding: 0;
              float: left;
              width: 220px;
              height: 18px;
              margin: 10px 15px 0 0;
            }
          }
        }
         
        >.photo{
          img{
            width: 100%;
            display: block;
          }
        }
      }
      .centerCon{
        display: none;
        position: absolute;
        width: 100%;
        .pingjia{
          margin: 2px 0 60px;
          img{
            width: 100%;
          }
        }
        >p{
          width: 100%;
          height: 40px;
          background-color: #FAFAFA;
          margin-bottom: 20px;
        }
        .tips{
          border: 1px solid #FFCC7F;
          background-color: #FFFFE5;
          font-size: 12px;
          padding: 10px;

          dl{
            &:nth-of-type(1){
              border-bottom: 1px solid #FFE8CA;
              padding-bottom: 10px;
            }
            display: flex;
            position: relative;
            margin:0 0 10px;
            
            dt{
              font-weight: 900px;
              width: 65px;
            }
            dd{
              flex: 1;
              >P{
                margin: 0;
              }
              
            }
          }
         
        }
      }
      .display{
        display: block;
      }
      }
      .rightCon{
        display: none;
        position: absolute;
        width: 100%;
        height: 400px;
        >p{
          width: 100%;
          height: 40px;
          background-color: #FAFAFA;
          margin-bottom: 20px;
        }
        .tips{
          border: 1px solid #FFCC7F;
          background-color: #FFFFE5;
          font-size: 12px;
          padding: 10px;

          dl{
            &:nth-of-type(1){
              border-bottom: 1px solid #FFE8CA;
              padding-bottom: 10px;
            }
            display: flex;
            position: relative;
            margin:0 0 10px;
            
            dt{
              font-weight: 900px;
              width: 65px;
            }
            dd{
              flex: 1;
              >P{
                margin: 0;
              }
              
            }
          }
         
        }
      }
      .display{
        display: block;
      }
    }
    
  }
 
}